import { useEffect, useState } from "react";
import { ArticleModelState, IRouteComponentProps, Link, useDispatch, useSelector } from "umi"
import classNames from 'classnames'
import styles from './index.less'
import { IShareItem } from "@/types";
import ImageViewer from "@/components/ImageViewer";
import HighLight from "@/components/HighLight";
import Likes from "@/likes";

import Reading from "@/components/reading";
import Catalogue from "@/components/catalogue";
import Upperginht from "@/components/rightcomp/upperright/upperright";
import { Affix,Modal } from 'antd';

const ArticleDetail: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {

    const id = match.params.id
    let path = match.path
    /*  path = path.replace(/[\/:]/g,'',);
     path = path.substring(0,path.length-2);
     console.log('path111',path); */
    const data = {
        id: id,
        path: path
    }
    // 通过useSelector获取model数据
    const { articleDetail } = useSelector((state: { article: ArticleModelState }) => state.article);
    console.log('articleDetail', articleDetail);
    

    const dispatch = useDispatch();
    let obj = {
        id: articleDetail.id,
        totalAmount: articleDetail.totalAmount
    }
    useEffect(() => {

    }, [articleDetail]);
    useEffect(() => {
        dispatch({
            type: 'article/getArticleDetail',
            payload: id,
        })
    }, []);
    useEffect(() => {
        dispatch({
            type: 'article/getArticleViews',
            payload: id,
        })
    }, []);
    const [visible,setVisible] = useState(true)

   

    function hideModal(){
            setVisible(false)
            location.href = 'http://localhost:8000/#/'
    }
    function showModal(){
        dispatch({
            type: 'article/getArticleAlipay',
            payload: obj,
        })
    }
    return <div className={classNames(styles.details, 'content')}>
      {
          articleDetail.totalAmount ? <Modal 
          title="确认以下收费信息"
          visible={visible}
          onCancel={hideModal}
          onOk={showModal}
          okText="确认"
          cancelText="取消"
          >支付金额{articleDetail.totalAmount}</Modal>:''
      } 
        
        <Likes data={data} />
        <div className={styles.details_content}>


            <div className={styles.details_left}>
                <ImageViewer>
                    <div className={styles.details_left_content}>
                        <img src={articleDetail.cover} alt="" />
                        <h1 className={styles.h1}>{articleDetail.title}</h1>
                        <p className={styles.time}>发布于{articleDetail.updateAt}·阅读量{articleDetail.views}</p>
                    </div>
                    <HighLight>
                        <div dangerouslySetInnerHTML={{ __html: articleDetail.html! }}></div>
                    </HighLight>
                </ImageViewer>
            </div>



            <div className={styles.details_right}>
                <Affix offsetTop={40}>
                    <Reading />
                    <Catalogue toc={articleDetail.toc!} />
                </Affix>
            </div>


        </div>
    </div>
}

export default ArticleDetail